<template>
  <view class="container">
    <!--背景图 -->
    <image src="../../static/images/costdetail.png" mode="aspectFill" style="width: 100%; height: 432rpx"></image>
    <!-- 费用详情 -->
    <view class="box">
      <!-- 费用 -->
      <view style="text-align: center">
        <text style="font-weight: bold; font-size: 48rpx; color: #ec0000">{{ obj.reality_money }}</text>
        <text style="font-weight: 500; font-size: 26rpx; color: #ec0000">元</text>
      </view>
      <!-- 里程提示 -->
      <view style="text-align: center; font-weight: 500; font-size: 26rpx; color: #222222; margin-top: 12rpx">（总里程约{{ obj.distance }}公里）</view>
      <!-- 费用明细 -->
      <view style="border-top: 1px solid #ccc; margin-top: 36rpx" class="costdetail">
        <view class="item">
          <view>{{ obj.day_night == 1 ? '白天' : '晚上' }}起步价（含5公里）</view>
          <view>25.00元</view>
        </view>
        <view class="item">
          <view>收费里程（{{ obj.reality_distance + ')公里' }}</view>
          <view>{{ obj.reality_money }}元</view>
        </view>
        <view class="item">
          <view>优惠券</view>
          <view>0元</view>
        </view>
        <view class="item">
          <view>
            <text>等待时长</text>
            <text>{{ obj.waittime }}</text>
          </view>
          <view>{{ obj.length_money_draw }}元</view>
        </view>
      </view>
      <!-- 分割线 -->
      <view style="width: 574rpx; height: 8rpx; background: #eef4fc; border-radius: 30rpx 30rpx 30rpx 30rpx"></view>

      <!-- 计费规则 -->
      <view @click="gocoserule" style="font-weight: 500; font-size: 26rpx; color: #222222; text-align: center; margin-top: 68rpx">
        <text>计费规则</text>
        <uni-icons type="right" size="15"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      length: 11, // 距离
      orderid: '',
      obj: {}
    };
  },
  onLoad(opt) {
    if (opt.orderid) {
      this.orderid = opt.orderid;
    }
    this.getdetail();
  },
  methods: {
    // 获取订单详情
    async getdetail() {
      const res = await this.http('/order/details', {
        order_id: this.orderid
      });
      console.log('订单详情', res);
      this.obj = res.data;
      let m = parseInt((res.data.differ_sec / 60) % 60);
      let s = parseInt(res.data.differ_sec % 60);
      m = m < 10 ? '0' + m : m;
      s = s < 10 ? '0' + s : s;
      this.obj.waittime = m + ':' + s;
    },
    // 跳转到计费规则
    gocoserule() {
      uni.navigateTo({
        url: '/pages/costrule/costrule'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .box {
    box-sizing: border-box;
    position: relative;
    top: -100rpx;
    left: 38rpx;
    width: 674rpx;
    height: 694rpx;
    background: #ffffff;
    border-radius: 30rpx 30rpx 30rpx 30rpx;
    padding: 50rpx;
    // margin: 0 38rpx;
    .costdetail {
      padding-top: 28rpx;
      .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 500;
        font-size: 28rpx;
        color: #222222;
        margin: 24rpx 0;
      }
    }
    .tip {
      font-weight: 500;
      font-size: 24rpx;
      color: #fb8333;
      text-align: center;
      margin-top: 14rpx;
    }
  }
}
</style>
<style>
page {
  background-color: #f8f8f8;
}
</style>
